<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🛡️ Shields.io URL 生成器</title>
</head>
<body>
<div class="container">
    <div class="header">
        <h1>🛡️ Shields.io URL 生成器</h1>
        <p>一个强大的工具，用于生成 <a href="https://shields.io/" target="_blank">shields.io</a> 徽章 URL。支持静态徽章、动态徽章、GitHub 徽章等多种类型。提供
            <strong>Python</strong> 和 <strong>JavaScript</strong> 两个版本。</p>
    </div>
    <div class="badges"> 
        <img src="https://img.shields.io/badge/Python-3.6+-blue?logo=python" alt="Python"> 
        <img src="https://img.shields.io/badge/JavaScript-ES6+-yellow?logo=javascript" alt="JavaScript"> 
        <img src="https://img.shields.io/badge/GUI-支持-green?logo=windows" alt="GUI"> 
        <img src="https://img.shields.io/badge/Web-支持-orange?logo=google-chrome" alt="Web"> 
    </div>
    <div class="features">
        <h2>✨ 特性</h2>
        <div class="feature-grid">
            <div class="feature-item"> 
                <span class="feature-icon">🎨</span> 
                <strong>静态徽章生成</strong>
                <p>自定义标签、消息、颜色、样式和Logo</p>
            </div>
            <div class="feature-item"> 
                <span class="feature-icon">🔄</span> 
                <strong>动态徽章生成</strong>
                <p>支持 JSON、XML、YAML 数据源</p>
            </div>
            <div class="feature-item"> 
                <span class="feature-icon">📊</span> 
                <strong>GitHub 徽章</strong>
                <p>快速生成星标、问题、许可证等GitHub徽章</p>
            </div>
            <div class="feature-item"> 
                <span class="feature-icon">🎯</span> 
                <strong>NPM 徽章</strong>
                <p>生成NPM包版本、下载量等徽章</p>
            </div>
            <div class="feature-item"> 
                <span class="feature-icon">🖼️</span> 
                <strong>Python GUI 界面</strong>
                <p>直观的图形化操作界面</p>
            </div>
            <div class="feature-item"> 
                <span class="feature-icon">🌐</span> 
                <strong>JavaScript 网页版</strong>
                <p>浏览器直接使用</p>
            </div>
        </div>
    </div>
    <div class="language-section">
        <h1>🐍 Python 版本</h1>
        <div class="quick-start">
            <h2>🚀 快速开始</h2>
            
            <div class="code-section">
                <h3>安装依赖</h3>
                <div class="code-block">
                    <button class="copy-btn" onclick="copyCode(this)">复制</button>
                    <pre><code># 克隆项目
git clone https://github.com/your-username/shieldsio-generator.git
cd shieldsio-generator/python

# 安装依赖
pip install -r requirements.txt</code></pre>
                </div>
            </div>

            <div class="code-section">
                <h3>使用 GUI 界面</h3>
                <div class="code-block">
                    <button class="copy-btn" onclick="copyCode(this)">复制</button>
                    <pre><code>python shieldsio_generator.py</code></pre>
                </div>
            </div>

            <div class="code-section">
                <h3>命令行使用</h3>
                <div class="code-block">
                    <button class="copy-btn" onclick="copyCode(this)">复制</button>
                    <pre><code>from shieldsio_generator import ShieldIOGenerator

# 创建生成器实例
generator = ShieldIOGenerator()

# 生成静态徽章
url = generator.static_badge("版本", "1.0.0", "brightgreen")
print(url)

# 生成动态徽章
dynamic_url = generator.dynamic_json_badge(
    url="https://api.github.com/repos/vuejs/vue",
    query="$.stargazers_count",
    label="Stars",
    color="gold"
)
print(dynamic_url)</code></pre>
                </div>
            </div>
        </div>
        <div class="api-reference">
            <h2>📖 Python API 参考</h2>
            
            <h3>ShieldIOGenerator 类</h3>

            <div class="method-section">
                <h4>构造函数</h4>
                <div class="code-block">
                    <button class="copy-btn" onclick="copyCode(this)">复制</button>
                    <pre><code>generator = ShieldIOGenerator(base_url="https://img.shields.io")</code></pre>
                </div>
            </div>

            <div class="method-section">
                <h4>主要方法</h4>

                <div class="method">
                    <h5>静态徽章</h5>
                    <div class="code-block">
                        <button class="copy-btn" onclick="copyCode(this)">复制</button>
                        <pre><code>static_badge(label, message, color="blue", label_color=None, style="flat", 
         logo=None, logo_color=None, logo_size=None, logo_width=None)</code></pre>
                    </div>
                </div>

                <div class="method">
                    <h5>动态JSON徽章</h5>
                    <div class="code-block">
                        <button class="copy-btn" onclick="copyCode(this)">复制</button>
                        <pre><code>dynamic_json_badge(url, query, label, color=None, prefix=None, suffix=None,
               cache_seconds=None, default=None, style="flat")</code></pre>
                    </div>
                </div>

                <div class="method">
                    <h5>GitHub徽章</h5>
                    <div class="code-block">
                        <button class="copy-btn" onclick="copyCode(this)">复制</button>
                        <pre><code>github_badge(badge_type, user, repo, **kwargs)</code></pre>
                    </div>
                </div>

                <div class="method">
                    <h5>NPM徽章</h5>
                    <div class="code-block">
                        <button class="copy-btn" onclick="copyCode(this)">复制</button>
                        <pre><code>npm_badge(package_name, badge_type="version", **kwargs)</code></pre>
                    </div>
                </div>
            </div>
        </div>
        <div class="examples">
            <h2>🎯 Python 示例</h2>
            
            <div class="example-section">
                <h3>基础使用</h3>
                <div class="code-block">
                    <button class="copy-btn" onclick="copyCode(this)">复制</button>
                    <pre><code>from shieldsio_generator import ShieldIOGenerator
generator = ShieldIOGenerator()

# 静态徽章
badge1 = generator.static_badge("版本", "1.0.0", "brightgreen")
badge2 = generator.static_badge("Python", "3.8", "blue", logo="python")

# 动态徽章
dynamic_badge = generator.dynamic_json_badge(
    url="https://api.github.com/repos/vuejs/vue",
    query="$.stargazers_count",
    label="Stars",
    color="gold"
)

# GitHub徽章
github_stars = generator.github_badge("stars", "vuejs", "vue")</code></pre>
                </div>
            </div>

            <div class="example-section">
                <h3>高级配置</h3>
                <div class="code-block">
                    <button class="copy-btn" onclick="copyCode(this)">复制</button>
                    <pre><code># 自定义样式和Logo
custom_badge = generator.static_badge(
    label="构建状态",
    message="通过",
    color="success",
    style="for-the-badge",
    logo="github",
    logo_color="white",
    label_color="green"
)

# 带缓存的动态徽章
cached_badge = generator.dynamic_json_badge(
    url="https://api.example.com/data",
    query="$.stats.users",
    label="用户数",
    cache_seconds=3600, # 缓存1小时
    default="0"
)</code></pre>
                </div>
            </div>
        </div>
    </div>
    <div class="language-section">
        <h1>🌐 JavaScript 版本</h1>
        <div class="quick-start">
            <h2>🚀 快速开始</h2>
            
            <div class="code-section">
                <h3>浏览器中使用</h3>
                <div class="code-block">
                    <button class="copy-btn" onclick="copyCode(this)">复制</button>
                    <pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Shields.io 生成器&lt;/title&gt;
    &lt;script src="shieldsio-generator.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;script&gt;
    const generator = new ShieldsIOGenerator();
    
    // 生成静态徽章
    const url = generator.staticBadge({
        label: '版本',
        message: '1.0.0',
        color: 'brightgreen'
    });
    console.log(url);
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
                </div>
            </div>

            <div class="code-section">
                <h3>Node.js 中使用</h3>
                <div class="code-block">
                    <button class="copy-btn" onclick="copyCode(this)">复制</button>
                    <pre><code>// CommonJS
const ShieldsIOGenerator = require('./shieldsio-generator');

// ES6 Modules
import ShieldsIOGenerator from './shieldsio-generator.js';

const generator = new ShieldsIOGenerator();
const url = generator.staticBadge({
    label: '版本',
    message: '1.0.0',
    color: 'brightgreen'
});
console.log(url);</code></pre>
                </div>
            </div>
        </div>
        <div class="api-reference">
            <h2>📖 JavaScript API 参考</h2>
            
            <h3>ShieldsIOGenerator 类</h3>

            <div class="method-section">
                <h4>构造函数</h4>
                <div class="code-block">
                    <button class="copy-btn" onclick="copyCode(this)">复制</button>
                    <pre><code>const generator = new ShieldsIOGenerator(baseUrl = 'https://img.shields.io');</code></pre>
                </div>
            </div>

            <div class="method-section">
                <h4>主要方法</h4>

                <div class="method">
                    <h5>静态徽章</h5>
                    <div class="code-block">
                        <button class="copy-btn" onclick="copyCode(this)">复制</button>
                        <pre><code>staticBadge({ label, message, color = 'blue', labelColor, style = 'flat', 
          logo, logoColor, logoSize, logoWidth })</code></pre>
                    </div>
                </div>

                <div class="method">
                    <h5>动态JSON徽章</h5>
                    <div class="code-block">
                        <button class="copy-btn" onclick="copyCode(this)">复制</button>
                        <pre><code>dynamicJsonBadge({ url, query, label, color, prefix, suffix, 
               cacheSeconds, defaultValue, style = 'flat' })</code></pre>
                    </div>
                </div>
            </div>
        </div>
        <div class="examples">
            <h2>🎯 JavaScript 示例</h2>
            
            <div class="example-section">
                <h3>基础使用</h3>
                <div class="code-block">
                    <button class="copy-btn" onclick="copyCode(this)">复制</button>
                    <pre><code>const generator = new ShieldsIOGenerator();

// 静态徽章
const badge1 = generator.staticBadge({
    label: '版本',
    message: '1.0.0',
    color: 'brightgreen'
});

const badge2 = generator.staticBadge({
    label: 'Python',
    message: '3.8',
    color: 'blue',
    logo: 'python',
    logoColor: 'white'
});

// 动态徽章
const dynamicBadge = generator.dynamicJsonBadge({
    url: 'https://api.github.com/repos/vuejs/vue',
    query: '$.stargazers_count',
    label: 'Stars',
    color: 'gold',
    prefix: '⭐'
});

// GitHub徽章
const githubStars = generator.githubStars('vuejs', 'vue');</code></pre>
                </div>
            </div>
        </div>
    </div>
    <div class="comparison">
        <h2>📊 功能对比</h2>
        <table>
            <thead>
                <tr>
                    <th>特性</th>
                    <th>Python 版本</th>
                    <th>JavaScript 版本</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>静态徽章生成</td>
                    <td>✅</td>
                    <td>✅</td>
                </tr>
                <tr>
                    <td>动态徽章生成</td>
                    <td>✅</td>
                    <td>✅</td>
                </tr>
                <tr>
                    <td>GitHub 徽章</td>
                    <td>✅</td>
                    <td>✅</td>
                </tr>
                <tr>
                    <td>NPM 徽章</td>
                    <td>✅</td>
                    <td>✅</td>
                </tr>
                <tr>
                    <td>GUI 界面</td>
                    <td>✅</td>
                    <td>⚠️ (网页版)</td>
                </tr>
                <tr>
                    <td>命令行工具</td>
                    <td>✅</td>
                    <td>❌</td>
                </tr>
                <tr>
                    <td>服务器部署</td>
                    <td>✅</td>
                    <td>✅</td>
                </tr>
                <tr>
                    <td>浏览器使用</td>
                    <td>❌</td>
                    <td>✅</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="badge-examples">
        <h2>🎨 徽章示例</h2>
        <div class="badge-category">
            <h3>静态徽章</h3>
            <div class="badge-grid"> 
                <img src="https://img.shields.io/badge/版本-1.0.0-brightgreen" alt="Version"> 
                <img src="https://img.shields.io/badge/Python-3.8-blue?logo=python" alt="Python"> 
                <img src="https://img.shields.io/badge/构建-通过-success?style=flat-square" alt="Build"> 
            </div>
        </div>
        <div class="badge-category">
            <h3>动态徽章</h3>
            <div class="badge-grid"> 
                <img src="https://img.shields.io/badge/dynamic/json?url=https://api.github.com/repos/vuejs/vue&query=$.stargazers_count&label=Stars&color=gold&prefix=⭐" alt="Stars"> 
            </div>
        </div>
        <div class="badge-category">
            <h3>GitHub徽章</h3>
            <div class="badge-grid"> 
                <img src="https://img.shields.io/github/stars/vuejs/vue" alt="GitHub Stars"> 
                <img src="https://img.shields.io/github/license/vuejs/vue" alt="GitHub License"> 
            </div>
        </div>
    </div>
    <div class="project-structure">
        <h2>📁 项目结构</h2>
        <div class="structure-grid">
            <div class="structure-item">
                <h3>Python 版本</h3>
                <pre><code>python/
├── shieldsio_generator.py # 主程序文件
├── requirements.txt # Python依赖
├── README.md # 说明文档
└── examples/ # 使用示例
    ├── basic_usage.py
    ├── gui_demo.py
    └── cli_usage.py</code></pre>
            </div>
            <div class="structure-item">
                <h3>JavaScript 版本</h3>
                <pre><code>javascript/
├── shieldsio-generator.js # 主程序文件
├── index.html # 网页示例
├── package.json # Node.js配置
├── README.md # 说明文档
└── examples/ # 使用示例
    ├── browser-demo.html
    ├── node-server.js
    └── react-component.jsx</code></pre>
            </div>
        </div>
    </div>
    <div class="footer">
        <h2>🤝 贡献</h2>
        <p>欢迎为两个版本提交代码！</p>
        <ol>
            <li>Fork 项目</li>
            <li>创建特性分支 (<code>git checkout -b feature/AmazingFeature</code>)</li>
            <li>提交更改 (<code>git commit -m 'Add some AmazingFeature'</code>)</li>
            <li>推送到分支 (<code>git push origin feature/AmazingFeature</code>)</li>
            <li>开启 Pull Request</li>
        </ol>
        <h2>📄 许可证</h2>
        <p>本项目采用 MIT 许可证 - 查看 <a href="LICENSE">LICENSE</a> 文件了解详情。</p>
        <h2>🙏 致谢</h2>
        <ul>
            <li><a href="https://shields.io/" target="_blank">shields.io</a> - 优秀的徽章服务</li>
            <li><a href="https://simpleicons.org/" target="_blank">Simple Icons</a> - 丰富的图标资源</li>
        </ul>
        <div class="final-note">
            <p><strong>选择适合你的版本，开始创建漂亮的徽章吧！</strong> 🎉</p>
        </div>
    </div>
</div>

<style>
    /* CSS 样式保持不变 */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        line-height: 1.6;
        color: #333;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        min-height: 100vh;
    }

    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
    }

    .header {
        background: white;
        padding: 40px;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        margin-bottom: 30px;
        text-align: center;
    }

    .header h1 {
        font-size: 2.5em;
        margin-bottom: 15px;
        color: #2c3e50;
    }

    .header p {
        font-size: 1.2em;
        color: #666;
    }

    .badges {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin: 20px 0;
        flex-wrap: wrap;
    }

    .features {
        background: white;
        padding: 30px;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        margin-bottom: 30px;
    }

    .feature-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 20px;
        margin-top: 20px;
    }

    .feature-item {
        padding: 20px;
        background: #f8f9fa;
        border-radius: 10px;
        border-left: 4px solid #667eea;
    }

    .feature-icon {
        font-size: 2em;
        display: block;
        margin-bottom: 10px;
    }

    .language-section {
        background: white;
        padding: 30px;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        margin-bottom: 30px;
    }

    .language-section h1 {
        color: #2c3e50;
        border-bottom: 3px solid #667eea;
        padding-bottom: 10px;
        margin-bottom: 20px;
    }

    .code-section {
        margin: 20px 0;
    }

    .code-section h3 {
        color: #2c3e50;
        margin-bottom: 10px;
    }

    .code-block {
        position: relative;
        background: #1e1e1e;
        border-radius: 8px;
        overflow: hidden;
        margin: 10px 0;
    }

    .code-block pre {
        margin: 0;
        padding: 20px;
        overflow-x: auto;
    }

    .code-block code {
        color: #d4d4d4;
        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
        font-size: 0.9em;
        line-height: 1.5;
    }

    .copy-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        background: #667eea;
        color: white;
        border: none;
        padding: 5px 10px;
        border-radius: 5px;
        cursor: pointer;
        font-size: 0.8em;
    }

    .copy-btn:hover {
        background: #5a6fd8;
    }

    .method-section {
        margin: 25px 0;
    }

    .method {
        margin: 15px 0;
        padding: 15px;
        background: #f8f9fa;
        border-radius: 8px;
    }

    .method h5 {
        color: #2c3e50;
        margin-bottom: 10px;
    }

    .comparison {
        background: white;
        padding: 30px;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        margin-bottom: 30px;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
    }

    th,
    td {
        padding: 12px;
        text-align: left;
        border-bottom: 1px solid #ddd;
    }

    th {
        background: #f8f9fa;
        font-weight: bold;
    }

    tr:hover {
        background: #f8f9fa;
    }

    .badge-examples {
        background: white;
        padding: 30px;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        margin-bottom: 30px;
    }

    .badge-category {
        margin: 25px 0;
    }

    .badge-category h3 {
        color: #2c3e50;
        margin-bottom: 15px;
    }

    .badge-grid {
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
    }

    .project-structure {
        background: white;
        padding: 30px;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        margin-bottom: 30px;
    }

    .structure-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
        gap: 30px;
        margin-top: 20px;
    }

    .structure-item {
        background: #f8f9fa;
        padding: 20px;
        border-radius: 10px;
    }

    .structure-item h3 {
        color: #2c3e50;
        margin-bottom: 15px;
    }

    .structure-item pre {
        background: #1e1e1e;
        padding: 15px;
        border-radius: 8px;
        overflow-x: auto;
    }

    .structure-item code {
        color: #d4d4d4;
        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    }

    .footer {
        background: white;
        padding: 30px;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }

    .footer h2 {
        color: #2c3e50;
        margin: 20px 0 15px 0;
    }

    .footer ol,
    .footer ul {
        margin-left: 20px;
        margin-bottom: 20px;
    }

    .footer li {
        margin: 8px 0;
    }

    .final-note {
        text-align: center;
        padding: 30px;
        background: linear-gradient(135deg, #667eea, #764ba2);
        color: white;
        border-radius: 10px;
        margin-top: 30px;
    }

    .final-note p {
        font-size: 1.3em;
        margin: 0;
    }

    @media (max-width: 768px) {
        .header {
            padding: 20px;
        }

        .header h1 {
            font-size: 2em;
        }

        .feature-grid {
            grid-template-columns: 1fr;
        }

        .structure-grid {
            grid-template-columns: 1fr;
        }

        .badge-grid {
            justify-content: center;
        }
    }
</style>

<script>
    function copyCode(button) {
        const codeBlock = button.parentElement;
        const code = codeBlock.querySelector('code').textContent;
        navigator.clipboard.writeText(code).then(() => {
            const originalText = button.textContent;
            button.textContent = '已复制!';
            setTimeout(() => {
                button.textContent = originalText;
            }, 2000);
        }).catch(err => {
            console.error('复制失败:', err);
            alert('复制失败，请手动复制代码');
        });
    }

    // 添加代码高亮（简化版）
    document.addEventListener('DOMContentLoaded', function() {
        const codeBlocks = document.querySelectorAll('code');
        codeBlocks.forEach(block => {
            const code = block.textContent;
            // 简单的关键词高亮
            let highlighted = code
                .replace(/(from|import|def|class|return|const|let|var|function|if|else|for|while)(?=\s)/g, '<span style="color: #569cd6;">$1</span>')
                .replace(/(#.*$)/gm, '<span style="color: #6a9955;">$1</span>')
                .replace(/(".*?"|'.*?')/g, '<span style="color: #ce9178;">$1</span>')
                .replace(/(\d+)/g, '<span style="color: #b5cea8;">$1</span>');
            block.innerHTML = highlighted;
        });
    });
</script>
</body>
</html>